<template>
	<div class="recipe_container">
		<div class="recipe_name">
			<p>{{ recipe.name }}</p>
		</div>
		<div class="recipe_main flex-center">
			<div v-for="item in recipe.ingredients" :key="item.id" class="flex-center">
				<p class="recipe_text">{{ item.amount}}x &nbsp;</p>
				<el-image :src="Item(item.iconUrl)" class="recipe_image"></el-image>
			</div>
			<p v-show="recipe.ingredients.length != 0 && recipe.products.length != 0">=></p>
			<div v-for="item in recipe.products" :key="item.id" class="flex-center">
				<p class="recipe_text">{{ item.amount}}x &nbsp;</p>
				<el-image :src="Item(item.iconUrl)" class="recipe_image"></el-image>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "simpleRecipeInfo",
		props: ["recipe"],
		methods: {
			Item(url) {
				return this.$img.i_64(url);
			},
		},
	};
</script>

<style scoped>
	.recipe_container {
		width: calc(100% - 20px);
		border: 1px solid;
		margin: 5px;
		padding: 5px;
		border-radius: 5px;
	}

	.recipe_name {
		width: 100%;
		height: 40px;
		text-align: center;
	}

	.flex-center {
		display: flex;
		justify-content: space-around;
		justify-items: center;
	}

	.recipe_main {
		width: 100%;
		height: 32px;
	}

	.recipe_text {
		float: left;
	}

	.recipe_image {
		width: 32px;
		height: 32px;
		float: left;
	}

	p {
		margin: 0px;
	}
</style>